<template>
    <div class="cinemalist">
        <ul class="">
            <li class="name">{{cinemaitem.name}}  <span class="price"> &#12288;{{cinemaitem.price}}</span> <span class="small">元起</span></li>
            <li class="loacte">{{cinemaitem.locate}}</li>
            <li class="tag" v-for="(tag,i) in Tag" :key="i"><span :class="[ i == 2 ? 'tag2':'tag1']">{{tag}}</span>  </li>
            <li class="discount"> <div class="card"><img src="../assets/img/card.png" alt=""></div><span>&#12288;开卡特惠，首单1张最高立减6元</span></li>
        </ul>
    </div>
</template>

<script>

export default {
    name:'cinemalist',
    props:['cinemaitem'],
    data(){
        return{
            Tag:[],
        }
        
    },
    created(){
        this.Tag=this.cinemaitem.tag.split('，');
    }
}
</script>

<style lang="scss" scoped>
.cinemalist{
    display: flex;
    padding: 13px 15px 13px 0px;
    margin: 0px 0px 0px 15px;
    border-bottom: 1px solid #ededed;
    >ul{
        list-style-type: none;
        margin:0;
        padding: 0px;
        >li{
            margin-top: 4px;
        }
        >.name{
            font-size: 1rem;

            >.price{
                font-size: 1.125rem;
                color: #f03D37;
            }
            >.small{
                font-size: 0.75rem;
                color: #f03D37;
            }
        }

        >.loacte{
            font-size: 0.8125rem;
            color: #666;
        }


        >.tag{
            display: inline;
            font-size: 0.75rem;
            // letter-spacing :1px;
            margin-right: 5px;
            >.tag1{
                color: #589DAF;
                border: 1px solid #589DAF;
            }
            >.tag2{
                color: #f90;
                border: 1px solid #f90;
            }
        }


        >.discount{
            font-size: 0.75rem;
            color: #999999;
            >.card{
                display: inline;
                 >img{
                    width: 15px;
                    height: 14px;
                    vertical-align:middle;
                }
               
                    
            }
            
        } 

        

    }

}
</style>
